<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
    <title>Unit Test: Control</title>
    <script type="text/javascript" src="../../scripts/dd/dd.js"></script>
    <style type="text/css">
    *{font-family:'Segoe UI', Verdana;}
    body { color: #253340; }
    .control-button {
        margin: 10px 0 0 10px;
        border-left: 4px solid #F26422;
        border-right: none;
        border-top: none;
        border-bottom: none;
        background: #F0F1F4;
        text-align: left;
        padding: 4px 6px;
        cursor: pointer;
    }
    </style>
    <script type="text/javascript">
    dd({
        debug: true,
        modules:[
            "control"
        ]
    });
    dd(function() {
        // Create Control, all attributes pass in...
        // <button name="testButton">
        //   <button.label>Test Label</button.label><!-- string data type -->
        //   <button.description>Test Description</button>
        // </button>
        dd.control("button", { // allows controls to be extended even further
            render: function(o) // prints the elements, how to extend with future modules?
            { // what about renders.push(m.render) -> call these after the base to modify
                o = o || {};
                this.buttonElement = dd(this.parent).addElement("button", {
                    className: "control-button"
                });
                this.labelElement = dd(this.buttonElement).addElement("span", {
                    style: {
                        fontSize: "20px",
                        color: "#253340"
                    }
                });
                dd(this.buttonElement).addElement("br");
                this.descriptionElement = dd(this.buttonElement).addElement("span", {
                    style: {
                        color: "#6A747E"
                    }
                });
                // Wires up html event triggers
                dd(this.buttonElement).event({
                    click:function()
                    {
                        dd(this.control).trigger("click");
                    }
                }, { control: this });
                dd(this).label(o.label || "");
                dd(this).description(o.description || "");
            },
            design: { // Wires up the logic
                label: { // this.label()
                    type: "string", // design time type
                    value: "Label", // design time default
                    getValue: function()
                    {
                        return dd(this.labelElement).text();
                    },
                    setValue: function(s)
                    {
                        return dd(this.labelElement).text(s);
                    }
                },
                description: {
                    type: "string",
                    value: "Descrption",
                    getValue: function()
                    {
                        return dd(this.descriptionElement).text();
                    },
                    setValue: function(s)
                    {
                        return dd(this.descriptionElement).text(s);
                    }
                }
            }
        });
        // Test the control with defaults
        var button1 = dd(dd.body).addControl("button", {
            label: "test",
            description: "a test button"
        });
        dd(button1).event({
            click:function()
            {
                dd.log("Button 1 Clicked");
            }
        });
        // More tests
        var button2 = dd(dd.body).addControl("button");
        dd(button2).label("New Label Here 2");
        dd(button2).description("Description Here 2");
        dd(button2).event({
            click:function()
            {
                dd.log("Button 2 Clicked");
            }
        });
    });
    </script>
</head>
<body><p>Loading...</p></body>
</html>
